<template>
    <div>
        <h3>给第{{id}}条新闻发表点评论吧：&nbsp;&nbsp;</h3>
        <hr>

         <textarea placeholder="请输入吐槽内容（最多BB120字）" maxlength="120" v-model="msg"></textarea>
         <mt-button type="primary" size="large" @click="postcomments">发表评论</mt-button>


         <div class="cmt-list">
             <div class="cmt-item" v-for="(item,i) in comments" :key="i">
                 <div class="cmt-title">
                     
                     第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dateFormat}}
                 </div>
                 
                 <div class="cmt-body">
                     {{ item.content === 'undefined' ? '此用户嘛都没说！': item.content}}
                 </div>
             </div>
              

        
         </div>
         <mt-button type="danger" size="large" plain >加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from "mint-ui"
export default {


    data(){

        return{
      
              pageIndex:1,
              msg:"",
              comments : [
                  {
                      user_name:"秀秀",
                      add_time:"2019-04-21 11:07:47",
                      content:"酸酸甜甜就是我！"
                  },
                      {
                      user_name:"秀秀er",
                      add_time:"2019-04-22 10:42:47",
                      content:"我真是个小机灵鬼！"
                  },
                      {
                      user_name:"秀秀eee",
                      add_time:"2019-04-29 11:44:47",
                      content:"我最执着！"
                  },
                      {
                      user_name:"秀秀wwer",
                      add_time:"2019-04-29 11:55:47",
                      content:"我最棒！"
                  },
                      {
                      user_name:"秀秀tete",
                      add_time:"2019-04-29 11:22:47",
                      content:"我最可爱！"
                  },
                        {
                      user_name:"秀秀tete",
                      add_time:"2019-04-29 11:25:47",
                      content:""
                  }
              ]

        }
    },
     created(){
         //this.$route获取的当前调用该父组件的路由，就是当前页面上的路由，
         //和父组件通过路由获取id并传值过来的id是一个路由。
       console.log(this.id)
       console.log(this.$route.params.id)
     },
    methods:{
    //通过接口加载评论区数据
        // getComments(){
        //     this.$http
        //   .get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex)
        //   .then(rsp => {
        //         if (rsp.body.status === 0){
         //           // this.comments = rsp.body.message;
         //         //加载数据进行新数据拼接老数据
        //              this.comments = this.comments + rsp.boody.message
        //         }else{
        //             Toast("获取评论失败！")
        //         }
        //     })
        // },
    
        //   getmore(){
        //       //page增加一
        //       this.pageIndex++;
        //       this.getComments();

        //   }
        postcomments(){
            //校验是否为空内容


            if(this.msg.trim().length === 0){
                Toast("评论内容不能为空！")
                return
            }



            //发表评论的方法
            //参数1 ：请求的URL地址
            //参数2：提交给服务器的数据对象{content：this.msg}
            //参数3：提交时候，表单中的数据格式定义。{emulateJSON : true}
        //     this.$http
        //     .post("api/postcomment/"+ this.$route.params.id,{
        //         content:this.msg.trim()
        //     })
        //     .then(function(rsp){
        //         if (rsp.body.status === 0){
        //             var cmt = {
        //                 user_name:'秀秀',
        //                 add_time:Date.now(),
        //                 content:this.msg.trim()
        //             };
        //             this.comments.unshift(cmt);
        //             this.msg = "";
        //         }
        //     });
        // }


       //模拟数据添加
                
                    var cmt = {
                        user_name:'秀秀',
                        add_time:Date.now(),
                        content:this.msg.trim()
                    };
                    this.comments.unshift(cmt);
                    this.msg = "";
                

            }
    },
    //获取父组件数据追加到当前data中。
      props:["id"]
}
</script>

<style lang="scss" scoped>
h3{
    font-size: 18px;

}
.cmt-list{
    margin: 5px 0;
    .cmt-item{
        font-size: 13px;
        .cmt-title{
            line-height: 30px;
            background-color:#ccc;
        }
        .cmt-body{
            line-height: 35px;
            text-indent:2em;
        }
    }
    
}
</style>
